<template>
  <div class="m-4">
    <el-cascader :options="gridtree" v-model="gridvalue" :props="cascaderProps">
      <template #default="{ node, data }">
        <span>{{ data.gname }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
</template>

<script setup>
import { useGridStore } from '@/stores/grid.js'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
const gridStore = useGridStore()
const { gridtree, gridvalue } = storeToRefs(gridStore)

const cascaderProps = ref({
  value: 'gname',
  label: 'gname'
})

onMounted(() => {
  gridStore.loaddata()
})
</script>
